<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="tableBar">
        <div class="tableLab">
          <el-button type="danger" @click="deleteHandle('批量', null)">
            批量删除
          </el-button>
          <el-button
            type="primary"
            style="margin-left: 15px"
            @click="addChineseWesternMedicinetype('add')"
          >
            + 新建药品信息
          </el-button>
        </div>

        <label style="margin-left: 100px">药品名称：</label>
        <el-input
          v-model="input"
          placeholder="请填写药品名称"
          style="width: 14%"
          clearable
          @clear="init"
          @keyup.enter.native="initFun"
        />

        <label style="margin-right: 10px; margin-left: 20px">分类：</label>
        <el-select
          v-model="categoryId"
          style="width: 14%"
          placeholder="请选择"
          clearable
          @clear="init"
        >
          <el-option
            v-for="item in ChineseWesternMedicineCategoryList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <label style="margin-right: 10px; margin-left: 20px">状态：</label>
        <el-select
          v-model="ChineseWesternMedicineStatus"
          style="width: 14%"
          placeholder="请选择"
          clearable
          @clear="init"
        >
          <el-option
            v-for="item in saleStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button class="normal-btn continue" @click="init(true)">
          查询
        </el-button>
      </div>
      <el-table
        v-if="tableData.length"
        :row-class-name="tableRowClassName"
        :data="tableData"
        style="width: 100%"
        class="tableBox"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="25" />
        <el-table-column prop="name" label="药品名称" />
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="药品名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="分类">
                <span>
                  {{ props.row.categoryName }}
                </span>
              </el-form-item>
              <el-form-item label="价格">
                <span> ￥{{ props.row.price }} </span>
              </el-form-item>
              <el-form-item label="主治功能">
                <span> {{ props.row.description }} </span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="image" label="图片">
          <template slot-scope="{ row }">
            <el-image
              style="width: 80px; height: 40px; border: none; cursor: pointer"
              :src="row.image"
            >
              <div slot="error" class="image-slot">
                <img
                  src="./../../assets/noImg.png"
                  style="width: auto; height: 40px; border: none"
                />
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="categoryName"
          label="分类"
          sortable
          :filters="[
            { text: '中药材', value: '中药材' },
            { text: '清热解毒', value: '清热解毒' },
            { text: '汤料花茶', value: '汤料花茶' },
            { text: '消化系统', value: '消化系统' },
            { text: '呼吸系统', value: '呼吸系统' },
            { text: '五官用药', value: '五官用药' },
            { text: '其他药品', value: '其他药品' },
          ]"
          :filter-method="filterTypes"
          filter-placement="bottom-end"
        />
        <el-table-column label="售价" sortable>
          <template slot-scope="scope">
            <span style="margin-right: 10px"
              >￥{{ (scope.row.price.toFixed(2) * 100) / 100 }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          prop="tag"
          :filters="[
            { text: '下架', value: String(0) },
            { text: '上架', value: String(1) },
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <div
              class="tableColumn-status"
              :class="{ 'stop-use': String(scope.row.status) === '0' }"
            >
              <el-tag
                :type="String(scope.row.status) === '1' ? 'success' : 'primary'"
                disable-transitions
              >
                {{ String(scope.row.status) === '0' ? '下架' : '上架' }}
              </el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column sortable prop="updateTime" label="最后操作时间" />
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button
              size="small"
              class="blueBug"
              @click="addChineseWesternMedicinetype(scope.row.id)"
            >
              修改
            </el-button>
            <el-button
              size="small"
              class="delBut"
              @click="deleteHandle('单删', scope.row.id)"
            >
              删除
            </el-button>
            <el-button
              size="small"
              plain
              type="String(scopr.row.status) === '1' ? 'success' : 'primary'"
              @click="statusHandle(scope.row)"
            >
              {{ scope.row.status == '0' ? '上架' : '下架' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Empty v-else :is-search="isSearch" />
      <el-pagination
        v-if="counts > 10"
        class="pageList"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { Component, Vue } from 'vue-property-decorator'
import HeadLable from '@/components/HeadLable/index.vue'
import {
  getChineseWesternMedicinePage,
  editChineseWesternMedicine,
  deleteChineseWesternMedicine,
  ChineseWesternMedicineStatusByStatus,
  ChineseWesternMedicineCategoryList,
} from '@/api/chinese_western_medicine'
import InputAutoComplete from '@/components/InputAutoComplete/index.vue'
import Empty from '@/components/Empty/index.vue'
import { baseUrl } from '@/config.json'

@Component({
  name: 'DishType',
  components: {
    HeadLable,
    InputAutoComplete,
    Empty,
  },
})
export default class extends Vue {
  input = ''
  counts = 0
  page = 1
  pageSize = 10
  checkList = []
  tableData = []
  ChineseWesternMedicineState = ''
  ChineseWesternMedicineCategoryList = []
  categoryId = ''
  ChineseWesternMedicineStatus = ''
  isSearch = false
  saleStatus = [
    {
      value: 0,
      label: '下架',
    },
    {
      value: 1,
      label: '上架',
    },
  ]

  created() {
    this.init()
    this.getChineseWesternCategoryList()
  }

  initProp(val) {
    this.input = val
    this.initFun()
  }

  initFun() {
    this.page = 1
    this.init()
  }

  async init(isSearch) {
    this.isSearch = isSearch
    await getChineseWesternMedicinePage({
      page: this.page,
      pageSize: this.pageSize,
      name: this.input || undefined,
      categoryId: this.categoryId || undefined,
      status: this.ChineseWesternMedicineStatus,
    })
      .then((res) => {
        if (res.data.code === 1) {
          this.tableData = res.data && res.data.data && res.data.data.records

          this.counts = Number(res.data.data.total)
          console.log('res_count', res)
          console.log('this.categoryId', this.categoryId)
        }
      })
      .catch((err) => {
        this.$message.error('请求出错了：' + err.message)
      })
  }

  // 添加
  addChineseWesternMedicinetype(st) {
    if (st === 'add') {
      this.$router.push({ path: '/chinesewesternmedicine/add' })
    } else {
      this.$router.push({
        path: '/chinesewesternmedicine/add',
        query: { id: st },
      })
    }
  }

  // 删除
  deleteHandle(type, id) {
    if (type === '批量' && id === null) {
      if (this.checkList.length === 0) {
        return this.$message.error('请选择删除对象')
      }
    }
    this.$confirm('删除该药品, 是否继续?', '确定删除', {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      deleteChineseWesternMedicine(
        type === '批量' ? this.checkList.join(',') : id
      )
        .then((res) => {
          if (res && res.data && res.data.code === 1) {
            this.$message.success('删除成功！')
            this.init()
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch((err) => {
          this.$message.error('请求出错了：' + err.message)
        })
    })
  }
  //获取分类下拉数据
  getChineseWesternCategoryList() {
    ChineseWesternMedicineCategoryList({
      type: 1,
    })
      .then((res) => {
        if (res && res.data && res.data.code === 1) {
          console.log("CategoryType:",this.type);
          console.log("cwnCategoryList:",this.ChineseWesternMedicineCategoryList);
          this.ChineseWesternMedicineCategoryList = (
            res.data &&
            res.data.data &&
            res.data.data
          ).map((item) => {
            return { value: item.id, label: item.name }
          })
        }
      })
      .catch(() => {})
  }

  //状态更改
  statusHandle(row) {
    let params = {}
    if (typeof row === 'string') {
      if (this.checkList.length === 0) {
        this.$message.error('批量操作，请先勾选操作药品！')
        return false
      }
      params.id = this.checkList.join(',')
      params.status = row
    } else {
      params.id = row.id
      params.status = row.status ? '0' : '1'
    }
    this.ChineseWesternMedicineState = params
    this.$confirm('确认更改该药品状态?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      // 上线下架---批量上线下架接口
      ChineseWesternMedicineStatusByStatus(this.ChineseWesternMedicineState)
        .then((res) => {
          if (res && res.data && res.data.code === 1) {
            this.$message.success('药品状态已经更改成功！')
            this.init()
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch((err) => {
          this.$message.error('请求出错了：' + err.message)
        })
    })
  }

  //上架下架颜色更改
  tableRowClassName({ row, value }) {
    if (String(row.status) === '0') {
      console.log('0', row)
      return 'warning-row'
    } else if (String(row.status) === '1') {
      console.log('1', row)
      return 'success-row'
    } else {
      console.log('res')
      return 'default-row'
    }
  }

  //表头导航上架下架搜索
  filterTag(value, row) {
    console.log('String(value)=', String(value))
    console.log('row.status=', row.status)
    console.log('row', row)
    return row.status == String(value)
  }

  //分类筛选
  filterTypes(value, row) {
    // console.log("数据类型", value,typeof item?.categoryId)
    // console.log('row',this.tableData)
    // let arrr  = []

    // arrr = this.tableData.filter((item)=>item.categoryId==value)
    // console.log("arrr",arrr)
    // for(let i = 0;i<this.tableData.length;i++){
    //   console.log('table',this.tableData[i])
    // }

    // console.log("value",value)
    // console.log("tempdata",this.tableData)
    // console.log("row.categoryId",String(row.categoryId))
    return String(row.categoryName) === String(value)
  }

  // 全部操作
  handleSelectionChange(val) {
    let checkArr = []
    val.forEach((n) => {
      checkArr.push(n.id)
    })
    this.checkList = checkArr
  }

  handleSizeChange(val) {
    this.pageSize = val
    this.init()
  }

  handleCurrentChange(val) {
    this.page = val
    this.init()
  }
}
</script>
<style lang="scss">
.el-table-column--selection .cell {
  padding-left: 10px;
}
</style>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    .container {
      background: #fff;
      position: relative;
      z-index: 1;
      padding: 30px 28px;
      border-radius: 4px;
      //查询黑色按钮样式
      .normal-btn {
        background: #333333;
        color: white;
        margin-left: 20px;
      }
      .tableBar {
        margin-bottom: 20px;

        .tableLab {
          display: inline-block;
          //float: right;
          span {
            cursor: pointer;
            display: inline-block;
            font-size: 14px;
            padding: 0 20px;
            color: $gray-2;
          }
        }
      }
      .tableBox {
        width: 100%;
        border: 1px solid $gray-5;
        border-bottom: 0;
      }
      .pageList {
        text-align: center;
        margin-top: 30px;
      }
    }
  }
}
</style>
<style lang="scss">
.el-table .warning-row {
  background-color: oldlace !important;
}

.el-table .success-row {
  background-color: #f0f9eb !important;
}

.el-table .default-row {
  background: yellow;
}
</style>
